<template>
	<view class="zhuce-one">
		<view class="up">
			<view class="avatar">
				<img src="" alt="">
			</view>
			<view class="info">
				<h4 style="color: rgb(255,182,18);">用户昵称：</h4>
				<p type="primary" @click="subpkg/camera" >点击修改个人资料</p>
			</view>
		</view>
	</view>
	<view class="zhuce-two">
		<view class="title">
			<h3 style="color: rgb(255,182,18);">任务记录</h3>
			<span style="color: gainsboro;">全部任务></span>
		</view>
		<view class="order">
			<!-- <view class="order-otem">
				<p><img src="../../static/image/mine-img/订单白.png" alt=""></p>
				<p style="color: white;">已报修</p>
			</view> -->
			<view class="order-otem">
				<p><img src="../../static/image/mine-img/维修工具白.png" alt=""></p>
				<p style="color: white;">维修中</p>
			</view>
			<view class="order-otem">
				<p><img src="../../static/image/mine-img/已完成白.png" alt=""></p>
				<p style="color: white;">已完成</p>
			</view>
			<!-- <view class="order-otem">
				<p><img src="../../static/image/mine-img/返修白.png" alt=""></p>
				<p style="color: white;">返修</p>
			</view> -->
		</view>
	</view>
	<view class="zhuce-three">
		<p><img src="../../static/image/mine-img/设置白.png" alt=""></p>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			updateUserInfo(){
				console.log('修改个人信息');
			}
		}
	}
	
</script>

<style lang="scss">
	page {
		background-color: #333333;
	}
.co{
		color: rgb(255,182,18);
	}
.zhuce-one {
	border: 1rpx solid #afafaf;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 40rpx;
	padding-bottom: 0;
    width: 600rpx;
    height: 200rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -320%);
	background-color: #4f4f4f;
	//绝对值由小到大==>左右 下上
	.up{
		width: 360rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: 40rpx;
		.avatar{
			width: 100rpx;
			height: 100rpx;
			border: 1px solid;
			border-radius: 50%;
			// margin-right: 10rpx;
			color: white;
		}
		.info{
			h{}
			p{
				&:last-child{
					font-size: 12rpx;
					color: white;
				}
			}
		}
	}
	.dwon{
		width: 100%;
		display: flex;
		justify-content: flex-end;
		div{
			width: 100rpx;
			// height: 100rpx;
			border:1px solid;
			padding: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
  }
  .zhuce-two {
  	border: 1rpx solid #afafaf;
  	border-radius: 20rpx;
  	box-sizing: border-box;
  	padding: 20rpx;
      width: 600rpx;
      height: 300rpx;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -130%);
	  background-color: #4f4f4f;
  	//绝对值由小到大==>左右 下上
	.title{
		display: flex;
		justify-content: space-between;
	
	}

    }
	.zhuce-three {
		border: 1rpx solid #afafaf;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
	    width: 600rpx;
	    height: 100rpx;
	    position: fixed;
	    top: 45%;
	    left: 50%;
		// display: flex;
		justify-content: center;
		
		flex-direction: column;
	    transform: translate(-50%, 20%);
		//绝对值由小到大==>左右 下上
		background-color: #4f4f4f;
		p{
			&:first-child{
				width: 60rpx;
				img{
					width: 100%;
				}
			}
		}
	  }
	  .order{
	  	width: 100%;
	  	padding-top: 50rpx;
	  	display: flex;
	  	.order-otem{
	  		width: 25%;
	  		height: 150rpx;
	  		
	  		display: flex;
	  		justify-content: center;
	  		align-items: center;
	  		flex-direction: column;
			border-radius: 6rpx;
			margin-right: 6rpx;
			p{
				&:first-child{
					width: 40rpx;
					img{
						width: 100%;
					}
				}
			}
	  	}
	  }
</style>
